<template>
  <a-modal
    ref="modal"
    :class="getClass(modalClass)"
    :style="getStyle(modalStyle)"
    v-if="visible"
    :visible="visible"
    v-bind="_attrs"
    @cancel="visible = false"
  >

    <template slot="title">
      <a-row class="j-modal-title-row" type="flex">
        <a-col class="left">
          <slot name="title">{{ title }}</slot>
        </a-col>
      </a-row>
    </template>
    <template slot="footer">
      <a-button @click.stop="()=>{ visible = false }">关闭</a-button>
    </template>
    <Schedule ref="Schedule" :empId="empId" :applyId="applyId"></Schedule>
  </a-modal>
</template>

<script>
  import Schedule from '@views/erp/staff/schedule.vue'
  import {getClass, getStyle} from '@/utils/props-util'
  export default {
    name: 'SelectSchedule',
    components: { Schedule },
    props: {
      empId: {
        type: String,
        required: false,
        default: null
      },
      applyId: {
        type: String,
        required: false,
        default: null
      },
    },
    data() {
      return {
        title:"个人中心",
        // 实际控制是否全屏的参数
        innerFullscreen: true,
        visible: false
      }
    },
    computed: {
      _attrs() {
        let attrs = { ...this.$attrs }
        // 如果全屏就将宽度设为 100%
        if (this.innerFullscreen) {
          attrs['width'] = '100%'
        }
        return attrs
      },
      modalClass() {
        return {
          'j-modal-box': true,
          'fullscreen': this.innerFullscreen,
        }
      },
      modalStyle() {
        let style = {}
        // 如果全屏就将top设为 0
        if (this.innerFullscreen) {
          style['top'] = '0'
        }
        return style
      },
    },
    methods: {
      getClass(clazz) {
        return { ...getClass(this), ...clazz }
      },
      getStyle(style) {
        return { ...getStyle(this), ...style }
      },
      close() {
        this.visible = false
      },
      open(){
        this.visible = true
      },
    }
  }
</script>

<style lang="less">
  .j-modal-box {

    &.fullscreen {
      top: 0;
      left: 0;
      padding: 0;

      // 兼容1.6.2版本的antdv
      & .ant-modal {
        top: 0;
        padding: 0;
        height: 100vh;
      }

      & .ant-modal-content {
        height: 100vh;
        border-radius: 0;

        & .ant-modal-body {
          /* title 和 footer 各占 55px */
          height: calc(100% - 55px - 55px);
          overflow: auto;
        }
      }

      &.no-title, &.no-footer {
        .ant-modal-body {
          height: calc(100% - 55px);
        }
      }

      &.no-title.no-footer {
        .ant-modal-body {
          height: 100%;
        }
      }
    }

    .j-modal-title-row {
      .left {
        width: calc(100% - 56px - 56px);
      }

      .right {
        width: 56px;
        position: inherit;

        .ant-modal-close {
          right: 56px;
          color: rgba(0, 0, 0, 0.45);

          &:hover {
            color: rgba(0, 0, 0, 0.75);
          }
        }
      }
    }
  }

  @media (max-width: 767px) {
    .j-modal-box.fullscreen {
      margin: 0;
      max-width: 100vw;
    }
  }
</style>